<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资金管理</el-breadcrumb-item>
      <el-breadcrumb-item>利息查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
<!--      <el-row :gutter="30">-->
<!--        <el-col :span="6" >-->
<!--          <el-form ref="form"  label-width="90px">-->
<!--            <el-form-item label="职工姓名:" class='worker-item'>-->
<!--              <el-input placeholder="输入职工姓名模糊查询" v-model="queryInfo.name" clearable></el-input>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-col>-->
<!--        <el-col :span="6" >-->
<!--          <el-form ref="form"  label-width="90px" >-->
<!--            <el-form-item label="身份证号:" class='worker-item'>-->
<!--              <el-input placeholder="输入身份证号" v-model="queryInfo.idNumber" clearable></el-input>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-button type="primary" @click="findWorker">查询职工</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-button type="danger" @click="clearFilter">清除筛选</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row type="flex" justify="space-between" align="bottom">
        <el-col>
          <h3>查询结果</h3>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" @click="exportWordFile">生成凭证</el-button>
        </el-col>
      </el-row>

      <!-- table表格区域 -->
      <el-table :data="interestList" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column type="index" label='序号' width="60px"></el-table-column>
        <el-table-column label="年度" prop="nd"></el-table-column>
        <el-table-column label="计息区间" prop="jxyf"></el-table-column>
        <el-table-column label="售房款利率 %" prop="nll"></el-table-column>
        <el-table-column label="售房款利息" prop="sfkje"></el-table-column>
        <el-table-column label="维修基金利率 %" prop="wxll"></el-table-column>
        <el-table-column label="维修基金利息" prop="wxje"></el-table-column>
        <el-table-column label="合计利息" prop="lx"></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-row type="flex" style="height: 60px" align='bottom'>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import toBlob from '@/utils/toblob.js'
export default {
  data() {
    return {
      // 查询参数对象
      queryInfo: {
        gjjzh: '',
        pageNum: 1,
        pageSize: 10
      },
      // 员工列表
      interestList: [],
      // 总数据条数
      total: 0
    }
  },
  created() {
    this.queryInfo.gjjzh = window.sessionStorage.getItem('gjjzh')
    this.getInterestList()
  },
  methods: {
    // 根据分页获取对应的商品列表
    async getInterestList() {
      const { data: { data: res }, data: meta } = await this.$http.get('/qtzj/queryInterest', { params: this.queryInfo}
      )
      console.log(res)
      if (meta.code !== 200) {
        return this.$message.error(meta.msg)
      }
      if (res.total == 0) {
        return this.$message.warning('查询条数！')
      }
      this.$message.success('获取职工信息成功！')
      this.interestList = res.records;
      // 处理男女数据格式
      this.total = res.total
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getInterestList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getInterestList()
    },
   async exportWordFile() {
      // 如果查询结果为空，则不导出空文档
     if (this.interestList.length === 0) return this.$message.info('查询结果为空，禁止导出~')
      // 1. 查询所有信息
      const queryInfo = { ...this.queryInfo, pageSize: -1 } // 更新某个属性的内容.-1获取全部
     console.log(queryInfo)
      const { data: { data: { records: allInterestList} }} = await this.$http.get('/qtzj/queryInterest', { params: queryInfo})
     // 2.获取base64文件
     const { data: { data: fileBase64} } = await this.$http.post('/qtzj/exportInterestInfo?dwmc=' + sessionStorage.getItem('dwmc'), allInterestList)
     // 3. 借助自己写的工具类toBlob将base64转换成Blob格式文件，并生成文件对象的前端地址
     // let fileURL = window.URL.createObjectURL(toBlob(fileBase64, 'docx'))
     let fileURL = window.URL.createObjectURL(toBlob(fileBase64, 'pdf'))

     // 4. 自动下载流程
     let link = document.createElement('a')  //创建一个超链接元素
     link.style.display = 'none'   // 隐藏该元素
     link.href = fileURL  // 创建下载的链接
     // ⭐ a标签 href+download 属性定义了下载链接的地址，download属性指定下载文件的名称。
     link.setAttribute('download',  '结息明细'+ '.pdf')
     document.body.appendChild(link) // 插入元素
     link.click()  // 模拟点击触发download地址下载
     document.body.removeChild(link) // 下载完成移除元素
     window.URL.revokeObjectURL(fileURL) // 释放掉blob对象
    }
  }
}
</script>

<style lang="less" scoped>
.worker-item .el-form-item__label{
  font-weight: bold;
  font-size: 16px;
}
</style>
